<template>
  <view class="articleItem-container" @click="goToDetail(article._id)">
    <view class="left">
      <view class="title">{{article.title}}</view>
      <view class="info">
        <view class="info-number">
          <view class="watch">
            <text class="cuIcon-attention icon"></text>
            <text>{{article.view}}</text>
          </view>
          <view class="comment">
            <text class="cuIcon-community icon"></text>
            <text>{{article.comment}}</text>
          </view>
        </view>
        <view class="author">
          <text>{{article.author}}</text>
        </view>
      </view>
    </view>
    <view class="right">
      <image :src="article.cover" class="item-img"></image>
    </view>
  </view>
</template>

<script>
const db = wx.cloud.database();
const _ = wx.cloud.database().command;
  export default {
    props:{
      article:{
        type:Object,
        required:true
      }
    },
    methods: {
      goToDetail(id){  
        db.collection("article").where({
          _id:id
        }).update({
          data:{
              view:_.inc(1)
          }      
        }).then(res=>{
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
         wx.navigateTo({
          url: '/pages/info/detail/detail?id='+id});   
          },
    },
  }
  console.log("111");
</script>

<style>
.articleItem-container{
  display: flex;
  justify-content: space-between;
  margin:60upx 30upx;
}
  .right{
   width:230rpx;
    height:160rpx;
    border-radius: 6px;
    overflow: hidden;
  }
.left{
  display: flex;
  flex-direction: column;
  margin-right:30upx;
  flex:1;
}
  
.title{
  		font-size: 30upx;
  		color: #323232;
  		font-weight: 550;
}
  
.info{
  font-size: 28upx;
  color:#1296db;
  margin-top:30upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
} 
.info-number{
  display: flex;
  align-items: center;
}
  
.watch{
  margin-right:50upx;
}

.icon{
  margin-right:10upx;
}

.item-img{
  width:100%;
  height:100%;
}
</style>